<template>
  <el-dialog
    :visible.sync="visible"
    title="搜索商品"
    :before-close="handleClose"
    width="60%">
<!--    <el-input-->
<!--      v-model="searchQuery"-->
<!--      placeholder="请输入商品编号"-->
<!--      @input="handleSearch"-->
<!--      style="margin-bottom: 20px;">-->
<!--    </el-input>-->
    <el-form :inline="true" class="demo-form-inline" size="mini">
      <el-form-item label="商品名称">
        <el-input v-model="queryParams.goods_name" placeholder="品名"></el-input>
      </el-form-item>
      <el-form-item label="成品料号">
        <el-input v-model="queryParams.serial_number" placeholder="成品料号"></el-input>
      </el-form-item>
      <el-form-item label="型号" prop="sku">
        <el-input v-model="queryParams.sku" placeholder="型号" clearable size="small" />
      </el-form-item>
      <el-form-item label="尺寸" prop="new_carton_size">
        <el-input v-model="queryParams.new_carton_size" placeholder="尺寸" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
        <el-button size="mini" @click="reast">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="singleTable"
      highlight-current-row
      :data="products"
      border
      height="300"
      style="width: 100%"
      v-loading="loading"
      @current-change="handleCurrentChange">
      <el-table-column
        prop="serial_number"
        label="成品料号">
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="sku"
        label="型号">
      </el-table-column>
      <el-table-column
        prop="new_carton_size"
        label="尺寸">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="goods_Ename"-->
<!--        label="英文名">-->
<!--      </el-table-column>-->
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="handleSearch"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { productList } from '@/api/product'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    onConfirm: {
      type: Function,
      required: true
    },
    diaclose: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      searchQuery: '',
      products: [],
      loading: false,
      queryParams: {
        goods_name: '',
        limit: 10,
        page: 1
      },
      total: 0,
      currentRow: null
    }
  },
  methods: {
    handleSearch() {
      this.loading = true
      productList(this.queryParams).then(response => {
        this.products = response.data
        this.total = response.count
        this.loading = false
      })
    },
    reast() {
      this.queryParams = {
        goods_name: '',
        serial_number: '',
        sku:'',
        new_carton_size:'',
        limit: 10,
        page: 1
      }
      this.handleSearch()
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    handleClose() {
      console.log('click')
      this.diaclose()
    },
    handleConfirm() {
      if(this.currentRow){
        this.onConfirm(this.currentRow)
      }
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
